<template>
  <div>
    <tab :idx="1"></tab>
    <div class="app-container">
      <div class="section">
        <el-row :gutter="20">
          <el-col :span="5" class="left">
            <p class="title">场地类型</p>
            <ul>
              <li v-for="(item,index) in tab" :class="item.id===idx?'on':''" @click="change(item.id)">{{ item.roomName }}</li>
            </ul>
          </el-col>
          <el-col :span="19">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="按分钟收费" name="first">
                <el-form ref="form" :model="formMinutle" :inline="true">
                  <el-form-item label="每">
                    <el-input v-model="formMinutle.costUnit" placeholder="请输入分钟"/>
                  </el-form-item>
                  <span class="yuan">分钟</span>
                  <el-form-item label="  ">
                    <el-input v-model="formMinutle.money" placeholder="请输入"/>
                  </el-form-item>
                  <span class="yuan">元</span>
                  <el-form-item label="开始后">
                    <el-input v-model="formMinutle.startMinute" placeholder="请输入"/>
                  </el-form-item>
                  <span class="yuan">分钟内不收费</span>
                  <el-form-item>
                    <el-button type="primary" class="search" @click="sumbitMinutle">提交</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="按包场收费" name="second">
                <el-form ref="form" :model="form" :inline="true">
                  <el-form-item label="每">
                    <el-input v-model="formMinutle.costUnit" placeholder="请输入"/>
                  </el-form-item>
                  <el-form-item label="分钟">
                    <el-input v-model="formMinutle.money" placeholder="请输入"/>
                  </el-form-item>
                  <span class="yuan">元</span>
                  <el-form-item label="开始后">
                    <el-input v-model="formMinutle.startMinute" placeholder="请输入"/>
                  </el-form-item>
                  <span class="yuan">分钟内不收费</span>
                  <el-form-item>
                    <el-button type="primary" class="search" @click="sumbitMinutle">提交</el-button>
                  </el-form-item>


                </el-form>
              </el-tab-pane>
              <el-tab-pane label="按分时段收费" name="third">
                <el-form ref="form" :model="formTrhee" :inline="true">
                  <el-row>
                    <el-form-item label="时间段一">
                      <el-time-select
                        placeholder="起始时间"
                        v-model="formTrhee.oneDto.startTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:45'
                        }">
                      </el-time-select>
                    </el-form-item>
                    <span class="yuan">点</span>
                    <el-form-item label="至">
                      <el-time-select
                        placeholder="结束时间"
                        v-model="formTrhee.oneDto.endTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:45',
                        minTime: formTrhee.oneDto.startTime
                     }"></el-time-select>
                    </el-form-item>
                    <span class="yuan">点</span>
                    <el-form-item label="每">
                      <el-input v-model="formTrhee.oneDto.costUnit" placeholder="请输入" class="input"/>
                    </el-form-item>
                    <span class="yuan">分钟</span>
                    <el-form-item label="收">
                      <el-input v-model="formTrhee.oneDto.money" placeholder="请输入" class="input"/>
                    </el-form-item>
                    <span class="yuan">元</span>
                    <el-form-item label="开始后">
                    <el-input v-model="formTrhee.oneDto.startMinute" placeholder="请输入"/>
                  </el-form-item>
                  <span class="yuan">分钟内不收费</span>
                  </el-row>
                  <el-row>
                    <el-form-item label="时间段二">
                      <el-time-select
                        placeholder="起始时间"
                        v-model="formTrhee.twoDto.startTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:45'
                        }">
                      </el-time-select>
                    </el-form-item>
                    <span class="yuan">点</span>
                    <el-form-item label="至">
                      <el-time-select
                        placeholder="结束时间"
                        v-model="formTrhee.twoDto.endTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:45',
                        minTime: formTrhee.twoDto.startTime
                     }"></el-time-select>
                    </el-form-item>
                    <span class="yuan">点</span>
                    <el-form-item label="每">
                      <el-input v-model="formTrhee.twoDto.costUnit" placeholder="请输入" class="input"/>
                    </el-form-item>
                    <span class="yuan">分钟</span>
                    <el-form-item label="收">
                      <el-input v-model="formTrhee.twoDto.money" placeholder="请输入" class="input"/>
                    </el-form-item>
                    <span class="yuan">元</span>
                    <el-form-item label="开始后">
                    <el-input v-model="formTrhee.twoDto.startMinute" placeholder="请输入"/>
                  </el-form-item>
                  <span class="yuan">分钟内不收费</span>
                  </el-row>
                  <el-row>
                    <el-form-item label="时间段三">
                      <el-time-select
                        placeholder="起始时间"
                        v-model="formTrhee.threeDto.startTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:45'
                        }">
                      </el-time-select>
                    </el-form-item>
                    <span class="yuan">点</span>
                    <el-form-item label="至">
                      <el-time-select
                        placeholder="结束时间"
                        v-model="formTrhee.threeDto.endTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:45',
                        minTime: formTrhee.threeDto.startTime
                     }"></el-time-select>
                    </el-form-item>
                    <span class="yuan">点</span>
                    <el-form-item label="每">
                      <el-input v-model="formTrhee.threeDto.costUnit" placeholder="请输入" class="input"/>
                    </el-form-item>
                    <span class="yuan">分钟</span>
                    <el-form-item label="收">
                      <el-input v-model="formTrhee.threeDto.money" placeholder="请输入" class="input"/>
                    </el-form-item>
                    <span class="yuan">元</span>
                    <el-form-item label="开始后">
                    <el-input v-model="formTrhee.threeDto.startMinute" placeholder="请输入"/>
                  </el-form-item>
                  <span class="yuan">分钟内不收费</span>
                  </el-row>
                  <el-row>
                    <el-form-item label="时间段四">
                      <el-time-select
                        placeholder="结束时间"
                        v-model="formTrhee.foureDto.startTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:45',
                     }"></el-time-select>
                    </el-form-item>
                    <span class="yuan">点</span>
                    <el-form-item label="至">
                      <el-time-select
                        placeholder="结束时间"
                        v-model="formTrhee.foureDto.endTime"
                        :picker-options="{
                        start: '00:00',
                        step: '00:15',
                        end: '23:45',
                        minTime: formTrhee.foureDto.startTime
                     }"></el-time-select>
                    </el-form-item>
                    <span class="yuan">点</span>
                    <el-form-item label="每">
                      <el-input v-model="formTrhee.foureDto.costUnit" placeholder="请输入" class="input"/>
                    </el-form-item>
                    <span class="yuan">分钟</span>
                    <el-form-item label="收">
                      <el-input v-model="formTrhee.foureDto.money" placeholder="请输入" class="input"/>
                    </el-form-item>
                    <span class="yuan">元</span>
                    <el-form-item label="开始后">
                    <el-input v-model="formTrhee.foureDto.startMinute" placeholder="请输入"/>
                  </el-form-item>
                  <span class="yuan">分钟内不收费</span>
                  </el-row>
                  <el-form-item>
                    <el-button type="primary" class="search" @click="saveThree">提交</el-button>
                  </el-form-item>


                </el-form>
              </el-tab-pane>

            </el-tabs>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>
</template>

<script>
  import tab from '../common'
  import { getRoom, saveOrUpdateRoom } from '@/api/mahjong/record'
  import { selectByMinute, updateCost, addCost,threeConfig,saveThreeConfig } from '@/api/mahjong/cost'

  export default {
    name: 'Gen',
    components: { tab },
    data() {
      return {
        formMinutle: '',
        formTrhee: {
          oneDto: {
            startTime: '',
            endTime: ''
          },
          twoDto: {
            startTime: '',
            endTime: ''
          },
          threeDto: {
            startTime: '',
            endTime: ''
          },
          foureDto: {
            startTime: '',
            endTime: ''
          }
        },
        roomId: '',
        minuteparam: {},
        costId: '',
        tab: ['大厅', '大包房', '小包房'],
        idx: 0,
        activeName: 'first',
        form: {}
      }
    },
    created() {
      this.initData()
    },

    methods: {
      saveThree(){
        this.formTrhee.roomId=this.roomId;
        this.formTrhee.costId=this.costId
        saveThreeConfig(this.formTrhee).then(response => {
            this.loading = true;
            if (response.code == 200) {
              this.msgSuccess('保存成功')
            }
            this.loading = false;
          }
        );
      },
      sumbitMinutle() {
        let that = this
        this.loading = true
        console.log('activeName',this.activeName)
        switch (that.activeName){
          case "first":
            that.formMinutle.costId = 0
            break
          case "second":
            that.formMinutle.costId = 1
            break
          case "third":
            that.formMinutle.costId = 2
            break
          default:
            that.formMinutle.costId = 0
            break
        }
        console.log('formMinutle',that.formMinutle)
        if (this.formMinutle.id != null) {
          updateCost(this.formMinutle).then(response => {
              if (response.code === 200) {
                selectByMinute(this.minuteparam).then(response1 => {
                    this.msgSuccess('修改成功')
                    that.formMinutle = response1.data
                    that.loading = false
                  }
                )
              }

              this.loading = false
            }
          )
        } else {
          this.formMinutle.bak1 = this.roomId
          addCost(this.formMinutle).then(response => {
              if (response.code === 200) {
                selectByMinute(this.minuteparam).then(response1 => {
                    this.msgSuccess('修改成功')
                    that.formMinutle = response1.data
                    that.loading = false
                  }
                )
              }
              this.loading = false
            }
          )
        }

      },
      initData() {
        /*获取场地列表*/
        getRoom({}).then(response => {
            this.loading = true
            this.tab = response.data
            this.minuteparam.roomId = this.tab[0].id
            this.minuteparam.costId = 0
          this.roomId=this.tab[0].id;
            /*初始化当前数据*/
            selectByMinute(this.minuteparam).then(response => {

                this.formMinutle = response.data
                this.loading = false
              }
            )
            this.loading = false
          }
        )

      },
      /*收费列表选择*/
      change(index) {
        this.roomId = index
        if (this.idx === index || index === undefined) {
          return false
        } else {
          this.idx = index
        }
        this.minuteparam.roomId = this.roomId
        this.loading = true
        if(this.costId!=2){
          selectByMinute(this.minuteparam).then(response => {

              this.formMinutle = response.data
              this.loading = false
            }
          )
        }else{
          threeConfig(this.roomId).then(response => {
              this.formTrhee = response.data
              this.loading = false
            }
          )
        }

      },
      /*收费类型变化*/
      handleClick(tab, event) {
        console.log(tab.index)
        this.costId = tab.index
        this.minuteparam.costId = this.costId
        console.log('111',this.costId)
        this.loading = true
        if(this.costId!=2){
          selectByMinute(this.minuteparam).then(response => {

              this.formMinutle = response.data
              this.loading = false
            }
          )
        }else{
          threeConfig(this.roomId).then(response => {
              this.formTrhee = response.data
              this.loading = false
            }
          )
        }

      }

    }
  }
</script>
<style>
  .el-tabs__item.is-active {
    color: #CAAB62;
  }

  .el-tabs__active-bar {
    background-color: #CAAB62;
  }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
  .app-container {
    border-top: 1px solid #EBEEF5;

    .section {
      background-color: #fff;
      padding: 20px;
      min-height: calc(100vh - 84px);

      .yuan {
        margin: 0px 20px 0 0;
        position: relative;
        top: 9px;
      }

      .input {
        width: 150px;
      }

    }

    .left {
      color: #9C9186;
      font-size: 14px;

      .title {
        text-align: left;
        margin-bottom: 30px;
      }

      li {
        line-height: 40px;
        cursor: pointer;
        margin-bottom: 10px;
        padding-left: 10px;

        &.on {
          background-color: rgba(202, 171, 98, 0.3);
          border: 1px solid #CAAB62;
          color: #CAAB62;
        }
      }
    }
  }
</style>
